<template>
  <div>
    <Row>
      <Card class="test-table">
        <h3 class="title-color">第一步:点击表格选择选项名称</h3>
        <Button type="success" @click="addBigType">增加选项</Button>
        <Button type="error" @click="handleClearCurrentRow">清除选中行</Button>
        <!-- 问卷选项 -->
        <Table
          ref="currentRowTable"
          highlight-row
          border
          :columns="bigHeader"
          :data="bigHeaderData"
          :loading="tabelLoading"
          @on-current-change="tableRadio"
        ></Table>
        <div style="margin:10px 0;">
          <p class="redTips">温馨提示： 点击表格行进行单选操作，选中行背景颜色为蓝色</p>
        </div>
      </Card>
    </Row>
    <Card class="departments">
      <h3 class="title-color">第二步:点击"选择单位按钮" 选择被测评单位,方可生成问卷</h3>
      <Row>
        <h4>
          您已经勾选了
          <span class="redFont">{{datas.departNum}}</span>
          个单位作为题干,问卷选项为 "
          <span class="redFont">{{datas.options}}</span> "
        </h4>
        <div>
          <Button type="primary" @click="openDepartModal">选择单位</Button>
          <Tooltip :content="generateTips" placement="top-start" max-width="270">
            <Button :disabled="isDisbledBorn" type="success" @click="generateExam">生成问卷</Button>
          </Tooltip>
        </div>
      </Row>
    </Card>

    <Card>
      <h3 class="title-color">第三步:点击"问卷预览"按钮预览问卷</h3>
      <div>
        <Tooltip content="点击按钮查看题干，可以进行题干排序操作" placement="top-start" max-width="270">
          <Button type="primary" @click="showOrhide">显示 / 隐藏题干</Button>
        </Tooltip>
        <Button type="warning" @click="previewExam" style="margin-left:10px;">问卷预览</Button>
      </div>
      <!-- 题干排序表格 -->
      <Row v-if="isHideStem" style="margin-top:10px;">
        <Table :columns="stemHead" :data="stemData" border :loading="examTableLoading">
          <template slot-scope="{ row, index }" slot="stem">
            <Input type="text" v-model="stem" v-if="false" />
            <span v-else>{{ row.stem }}</span>
          </template>

          <template slot-scope="{ row, index }" slot="sort">
            <!-- <Input type="text" v-model="sort" v-if="editIndex === index" /> -->
            <InputNumber :min="1" v-model="sort" v-if="editIndex === index"></InputNumber>
            <span v-else>{{ row.sort }}</span>
          </template>

          <template slot-scope="{ row, index }" slot="action">
            <div v-if="editIndex === index">
              <Button type="success" @click="handleSave(index)">保存</Button>
              <Button type="error" @click="editIndex = -1">取消</Button>
            </div>
            <div v-else>
              <Button type="primary" @click="handleEdit(row, index)">编辑</Button>
              <!-- <Button type="error" @click="stemRemove(index)">删除</Button> -->
            </div>
          </template>
        </Table>
      </Row>
    </Card>

    <!-- 问卷预览 -->
    <Card class="questionnaire" style="margin:10px 0;">
      <h2 align="center">{{examsTitle}}</h2>
      <div align="center">
        <div class="questionnaire-container">
          <Row v-for="(item, index) in previewExams" :key="index" class="question-title">
            <h3>{{index + 1}}.{{item.stem}}</h3>
            <div align="center">
              <RadioGroup>
                <Radio
                  class="radio-items"
                  v-for="(items , indexs) in item.selectList"
                  :key="indexs"
                  :label="items.selectItem"
                ></Radio>
              </RadioGroup>
            </div>
            <Divider />
          </Row>
        </div>
      </div>
    </Card>

    <!-- 增加或编辑选项模态框 -->
    <Modal v-model="bigTypeModal" :title="bigTypeModalTitle" @on-cancel="cancelBigTypeModal">
      <Form ref="bigTypeForm" :model="bigTypeForm" :rules="bigTypeFormReg" :label-width="80">
        <Row style="margin-top:20px;">
          <FormItem label="问卷选项" prop="selectName">
            <Input v-model="bigTypeForm.selectName" placeholder="请输入问卷选项"></Input>
          </FormItem>
        </Row>
        <Row>
          <FormItem label="年份" prop="datetime">
            <DatePicker
              type="year"
              format="yyyy"
              @on-change="handleFormat"
              :value="bigTypeForm.datetime"
              placeholder="请选择年份"
            ></DatePicker>
          </FormItem>
        </Row>
      </Form>
      <div slot="footer">
        <Button
          type="primary"
          size="large"
          :loading="modalLoading"
          @click="submitBigTypeModal('bigTypeForm')"
        >提交</Button>
        <Button size="large" @click="cancelBigTypeModal">取消</Button>
      </div>
    </Modal>

    <!-- 增加或编辑选项值模态框 -->
    <Modal
      v-model="smallTypeModal"
      :title="smallTypeModalTitle"
      @on-cancel="cancelsmallTypeModal"
      width="800"
    >
      <Form ref="smallTypeForm" :model="smallTypeForm" :label-width="80" style="width: 800px">
        <Row v-for="(item, index) in smallTypeForm.items" v-if="item.status" :key="index">
          <Col span="8">
            <FormItem
              label="选项"
              :prop="'items.' + index + '.options'"
              :rules="{required: true, message: '选项'  +'不能为空', trigger: 'blur'}"
            >
              <Input type="text" v-model="item.options" placeholder="请输入选项(必填)"></Input>
            </FormItem>
          </Col>

          <Col span="8">
            <FormItem
              label="权值"
              :prop="'items.' + index + '.weight'"
              :rules="{required: true, message: '权值'  +'不能为空', trigger: 'blur',type: 'number'}"
            >
              <InputNumber
                :max="100"
                :min="0"
                v-model="item.weight"
                placeholder="请输入权值(必填)"
                style="width:150px;"
              ></InputNumber>
            </FormItem>
          </Col>

          <Col span="4" offset="1">
            <Button type="error" @click="handleRemove(index)">删除</Button>
          </Col>
        </Row>

        <!-- 增加选项值按钮 -->
        <FormItem>
          <Row>
            <Col span="12">
              <Button
                type="success"
                long
                ghost
                @click="handleAdd"
                icon="md-add"
                style="width:190px;"
              >添加选项</Button>
            </Col>
          </Row>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          type="primary"
          size="large"
          :loading="modalLoading"
          @click="handleSubmit('smallTypeForm')"
        >提交</Button>
        <!-- <Button @click="handleReset('smallTypeForm')" style="margin-left: 8px">重置表单</Button> -->
        <Button size="large" @click="cancelsmallTypeModal">关闭</Button>
      </div>
    </Modal>

    <!-- 单位弹窗 -->
    <Modal v-model="departmentModal" title="选择单位" @on-cancel="cancelDepartModal" width="1000">
      <Form ref="searchDepartTable" v-model="searchDepartTable" :label-width="80">
        <Row>
          <FormItem label="部门类型" prop="departType">
            <Select
              v-model="searchDepartTable.departType"
              placeholder="请输入部门类型"
              style="width:250px;"
            >
              <Option value="乡镇">乡镇</Option>
              <Option value="县直单位">县直单位</Option>
            </Select>
            <Button type="primary" @click="searchDeparts">搜索</Button>
            <Button @click="submitDepartReset('searchDepartTable')">重置搜索</Button>
          </FormItem>
        </Row>
      </Form>
      <Table
        ref="selections"
        @on-selection-change="selectChange"
        :loading="tabelLoading"
        :columns="departmentHead"
        :data="departmentData"
        border
        height="600"
      ></Table>
      <div slot="footer">
        <Button type="primary" size="large" :loading="modalLoading" @click="submitDepart">提交</Button>
        <Button size="large" @click="cancelDepartModal">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { generateAjax } from "@/api/measurement";
// 单位请求
import { userAjax } from "@/api/systemMange";
// 页面初始化请求
const INITIALIZE_URL = "/option/class/query";
// 增加选项
const ADDBIGTYPE_URL = "/option/class/insert";
// 修改选项
const UPDBIGTYPE_URL = "/option/class/update";
// 删除选项
const DELBIGTYPE_URL = "/option/class/delete";
// 增加选项值
const ADDSMALLTYPE_URL = "/option/select/insert";
// 编辑选项值
const UPDSMALLTYPE_URL = "/option/select/update";
// 删除选项值
const DELSMALLTYPE_URL = "/option/select/delete";
// 单位查询
const DEPARTMENTQUERY_URL = "/department/query";
// 生成问卷
const GENERATE_URL = "/examQuestion/insert";
// 问卷查询
const EXAMQUESTION_URL = "/examQuestion/query";
// 问卷修改
const UPDEXAM_URL = "/examQuestion/updateSort";
// 问卷预览
const PREVIEW_URL = "/examQuestion/getExamView";
export default {
  data() {
    return {
      generateTips:
        "温馨提示：生成试卷必须先选择选项名称，然后在勾选单位提交，方可点击生成试卷按钮",
      paramsData: "", // 参数
      searchData: { id: "" }, // 二级页面id
      modalLoading: false,
      tabelLoading: false,
      examTableLoading: false,
      // 选项
      bigTypeModal: false,
      bigTypeModalTitle: "",
      // 选项form 数据
      bigTypeForm: {
        selectName: "",
        datetime: ""
      },
      // 选项值
      smallTypeModal: false,
      smallTypeModalTitle: "",
      index: 1,
      smallTypeForm: {
        items: [
          {
            options: "",
            weight: 0,
            index: 1,
            status: 1
          }
        ]
      },
      // 选项模态框验证
      bigTypeFormReg: {
        selectName: [
          {
            required: true,
            message: "请输入选项",
            trigger: "blur"
          }
        ],
        datetime: [
          {
            required: true,
            type: "string",
            message: "请选择年份",
            trigger: "change"
          }
        ]
      },
      // 选项表头
      bigHeader: [
        {
          title: "选项名称",
          key: "selectName"
        },
        {
          title: "年份",
          key: "datetime"
        },
        {
          title: "操作",
          key: "action",
          width: 380,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.bigTypeModal = true;
                      this.bigTypeModalTitle = "修改选项";
                      this.bigTypeForm = JSON.parse(JSON.stringify(params.row));
                      console.log(this.bigTypeForm);
                    }
                  }
                },
                "编辑选项"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delBigType(params.row);
                    }
                  }
                },
                "删除选项"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.smallTypeForm.optionId = params.row.id; // 赋值id
                      this.smallTypeModalTitle = "编辑选项";
                      this.smallTypeModal = true;
                      let parent = params.row.selectList; // 选项数据
                      let newList = []; // 重新组装数据
                      parent.forEach(item => {
                        newList.push({
                          index: item.id,
                          optionId: item.optionId,
                          status: 1,
                          options: item.options,
                          weight: item.weight
                        });
                      });
                      this.smallTypeForm.items = newList; // 赋值选项值
                    }
                  }
                },
                "添加/编辑选项值"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delSmallType(params.row);
                    }
                  }
                },
                "删除选项值"
              )
            ]);
          }
        }
      ],
      bigHeaderData: [],
      departmentModal: false,
      // 单位表格数据
      departmentHead: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "部门",
          key: "department",
          width: 120
        },
        {
          title: "部门简称",
          key: "departAddr",
          width: 120
        },
        {
          title: "部门类型",
          key: "departType",
          width: 150
        },
        {
          title: "单位分类",
          key: "departClas",
          width: 150
        },
        {
          title: "部门旧名称",
          key: "departOldName",
          width: 150
        },
        {
          title: "部门旧简称",
          key: "departOldAddr",
          width: 150
        }
      ],
      departmentData: [],
      searchDepartTable: { departType: "" },
      // 生成试卷数据
      datas: {
        departs: [], // 所选code和简称
        departNum: 0, // 部门数量
        options: "", // 所选选项
        optionId: "" // 所选选项Id
      },
      // 单位code 和 部门临时存放
      selDeparts: [], // code 和简称
      selectedNum: 0,
      // 题干排序表头
      stemHead: [
        {
          title: "题干/选项",
          slot: "stem"
        },
        {
          title: "排序",
          slot: "sort"
        },
        {
          title: "操作",
          slot: "action",
          width: 170
        }
      ],
      stemData: [],
      editIndex: -1, // 当前聚焦的输入框的行数
      stem: "", // 题干
      sort: 1, // 排序
      answer: "",
      // 预览试卷
      previewExams: [],
      examsTitle: "",
      isDisbledBorn: true, // 禁止按钮
      isHideStem: false // 是否隐藏题干
    };
  },
  methods: {
    // 初始化选项请求
    _getBigTypeData(formData, url, pageSize, pageNumber) {
      this.tabelLoading = true;
      const keyOne = "filter";
      formData = Object.assign(formData, {
        pageSize: pageSize,
        pageNumber: pageNumber
      });
      generateAjax({ formData, url, keyOne })
        .then(result => {
          this.tabelLoading = false;
          if (result.data.code === "200") {
            this.bigHeaderData = result.data.results.list;
            console.log(result);
            this.$Message.success("查询成功");
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 关闭弹窗事件
    cancelBigTypeModal() {
      this.bigTypeModal = false;
    },
    cancelsmallTypeModal() {
      this.smallTypeForm.items = [
        {
          options: "",
          weight: 0,
          index: 1,
          status: 1
        }
      ];
      this.smallTypeModal = false;
    },
    cancelDepartModal() {
      this.datas.departs = [];
      this.datas.departNum = 0;
      this.selDeparts = [];
      this.selectedNum = 0;
      // 取消全选
      this.$refs.selections.selectAll(false);
      this.departmentModal = false;
    },
    handleFormat(date) {
      this.bigTypeForm.datetime = date;
    },
    // 增加选项
    addBigType() {
      this.$refs["bigTypeForm"].resetFields();
      this.bigTypeModalTitle = "添加选项";
      this.bigTypeModal = true;
    },
    _generateAjax(formData, url) {
      const keyOne = "entity";
      return new Promise((resolve, reject) => {
        generateAjax({ formData, url, keyOne })
          .then(result => {
            if (result.data !== undefined) {
              resolve(result.data);
            } else {
              reject(err);
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    // 提交选项modal表单(选项修改/增加)
    submitBigTypeModal(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.modalLoading = true;
          if (this.bigTypeModalTitle === "添加选项") {
            this._generateAjax(this.bigTypeForm, ADDBIGTYPE_URL).then(
              result => {
                this.bigTypeModal = false;
                this.modalLoading = false;
                if (result.code === "200") {
                  this.$Message.success("添加成功！");
                  // 重新查询
                  this._getBigTypeData(
                    this.searchData,
                    INITIALIZE_URL,
                    this.pageSize,
                    this.pageNumber
                  );
                } else {
                  this.$Message.error("添加失败");
                }
              }
            );
          } else if (this.bigTypeModalTitle === "修改选项") {
            this._generateAjax(this.bigTypeForm, UPDBIGTYPE_URL).then(
              result => {
                this.bigTypeModal = false;
                this.modalLoading = false;
                if (result.code === "200") {
                  this.$Message.success("修改成功！");
                  // 重新查询
                  this._getBigTypeData(
                    this.searchData,
                    INITIALIZE_URL,
                    this.pageSize,
                    this.pageNumber
                  );
                } else {
                  this.$Message.error("修改失败");
                }
              }
            );
          }
        }
      });
    },
    // 删除选项
    delBigType(row) {
      this.$Modal.confirm({
        title: "删除选项",
        content: "<p>删除完成后将无法恢复</p>",
        loading: true,
        onOk: () => {
          this._generateAjax(row, DELBIGTYPE_URL).then(result => {
            this.$Modal.remove();
            if (result.code === "200") {
              this.$Message.info(result.message);
              this._getBigTypeData(
                this.searchData,
                INITIALIZE_URL,
                this.pageSize,
                this.pageNumber
              );
            } else {
              this.$Message.error(result.message);
            }
          });
        }
      });
    },
    // 选项值
    // 提交选项值表单（增加/修改）
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.modalLoading = true;
          let arr = []; // 存放未隐藏的选项
          this.smallTypeForm.items.forEach(item => {
            if (item.status === 1) {
              arr.push(item);
            }
          });
          this.smallTypeForm.items = arr; // 重新赋值
          this._generateSmallAjax(this.smallTypeForm, UPDSMALLTYPE_URL).then(
            result => {
              this.smallTypeModal = false;
              this.modalLoading = false;
              console.log(6666666);
              console.log(result);
              if (result.code === "200") {
                this.$Message.success(result.message);
                // 重新查询
                this._getBigTypeData(
                  this.searchData,
                  INITIALIZE_URL,
                  this.pageSize,
                  this.pageNumber
                );
              } else {
                this.$Message.error(result.message);
              }
            }
          );
          // }
        }
      });
    },
    // 重置选项
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    // 新增选项
    handleAdd() {
      this.index++;
      this.smallTypeForm.items.push({
        options: "",
        weight: 0,
        index: this.index,
        status: 1
      });
    },
    // 移出选项
    handleRemove(index) {
      this.smallTypeForm.items[index].status = 0;
    },
    _generateSmallAjax(formData, url) {
      const keyOne = "selectEntity";
      return new Promise((resolve, reject) => {
        generateAjax({ formData, url, keyOne })
          .then(result => {
            if (result.data !== undefined) {
              resolve(result.data);
            } else {
              reject(err);
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    // 删除选项值
    delSmallType(row) {
      this.$Modal.confirm({
        title: "删除选项值",
        content: "<p>删除完成后将无法恢复</p>",
        loading: true,
        onOk: () => {
          this._generateAjax(row, DELSMALLTYPE_URL).then(result => {
            this.$Modal.remove();
            if (result.code === "200") {
              this.$Message.info(result.message);
              this._getBigTypeData(
                this.searchData,
                INITIALIZE_URL,
                this.pageSize,
                this.pageNumber
              );
            } else {
              this.$Message.error(result.message);
            }
          });
        }
      });
    },
    /**
     * 表格单选
     * currentRow：当前行参数
     */
    tableRadio(currentRow) {
      this.datas.options = currentRow.selectName; // 赋值选项
      this.datas.optionId = currentRow.id; // 赋值选项ID
    },
    // 清除选中行
    handleClearCurrentRow() {
      this.$refs.currentRowTable.clearCurrentRow();
    },
    openDepartModal() {
      this.departmentModal = true;
    },
    // 单位查询
    _getDepartmentData(formData, url, pageSize, pageNumber) {
      this.tabelLoading = true;
      formData = Object.assign(formData, {
        pageSize,
        pageNumber
      });
      const keyOne = "departmentFilter";
      userAjax({ formData, url, keyOne })
        .then(result => {
          this.tabelLoading = false;
          if (result.data.code === "200") {
            this.searchLoading = false;
            this.departmentData = result.data.results.list;
            this.$Message.success("查询成功");
          } else {
            this.$Message.error("查询失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 搜索部门
    searchDeparts() {
      this._getDepartmentData(this.searchDepartTable, DEPARTMENTQUERY_URL);
    },
    // 重置单位搜索
    submitDepartReset(name) {
      // this.$refs[name].resetFields();
      this.searchDepartTable.departType = "";
    },
    // 单位表格多选
    selectChange(selection) {
      let arr = []; // code 和简称
      selection.forEach(item => {
        arr.push({ departCode: item.departcode, stem: item.departAddr });
      });
      this.selDeparts = arr;
      this.selectedNum = arr.length;
    },
    // 单位排序
    handleEdit(row, index) {
      this.stem = row.stem;
      this.sort = row.sort;
      this.editIndex = index;
    },
    stemRemove(index) {
      this.stemData.splice(index, 1);
    },
    // 修改问卷排序保存
    handleSave(index) {
      this.stemData[index].stem = this.stem;
      this.stemData[index].sort = this.sort;
      this.editIndex = -1;
      console.log(this.stemData[index]);
      this._generateExamAjAX(this.stemData[index], UPDEXAM_URL).then(result => {
        if (result.code === "200") {
          // 重新查询排序
          this._examQueryAjAX(this.datas, EXAMQUESTION_URL);
          // 重新预览问卷
          this._previewExamAjax(this.datas, PREVIEW_URL);
          this.$Message.success("修改成功");
        } else {
          this.$Message.error("修改失败");
        }
      });
    },
    // 提交单位模态框
    submitDepart() {
      this.datas.departs = this.selDeparts; // 单位简称和code
      this.datas.departNum = this.selectedNum; // 所选单位数量
      this.departmentModal = false;
    },
    // 插入/修改
    _generateExamAjAX(formData, url) {
      const keyOne = "entity";
      return new Promise((resolve, reject) => {
        generateAjax({ formData, url, keyOne })
          .then(result => {
            if (result.data !== undefined) {
              resolve(result.data);
            } else {
              reject(err);
            }
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    // 查询试卷
    _examQueryAjAX(formData, url) {
      const keyOne = "filter";
      this.examTableLoading = true;
      generateAjax({ formData, url, keyOne })
        .then(result => {
          if (result.data.code === "200") {
            this.examTableLoading = false;
            this.stemData = result.data.results.list;
            this.$Message.success(result.data.message);
          } else {
            this.$Message.error(result.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 生成问卷
    generateExam() {
      console.log(this.datas);
      this._generateExamAjAX(this.datas, GENERATE_URL).then(result => {
        if (result.code === "200") {
          // 查询问卷
          this._examQueryAjAX(this.datas, EXAMQUESTION_URL);
        } else {
          this.$Message.error("查询失败");
        }
      });
    },
    // 预览问卷请求
    _previewExamAjax(formData, url) {
      const keyOne = "filter";
      generateAjax({ formData, url, keyOne })
        .then(result => {
          console.log("预览");
          console.log(result);
          if (result.data.code === "200") {
            let item = result.data.results;
            this.previewExams = item.list;
            this.examsTitle = item.exam.examName;
            this.$Message.success(result.data.message);
          } else {
            this.$Message.error(result.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 预览问卷
    previewExam() {
      this._previewExamAjax(this.datas, PREVIEW_URL);
    },
    // 显示或隐藏题干
    showOrhide() {
      this.isHideStem = !this.isHideStem;
    }
  },
  created() {
    this.paramsData = this.$route.params.id;
    this.searchData.id = this.$route.params.id;
    this.datas.examId = this.$route.params.id;
    // 获取选项表格数据
    this._getBigTypeData(
      this.searchData,
      INITIALIZE_URL,
      this.pageSize,
      this.pageNumber
    );
    // 初始化单位模态框表格
    this._getDepartmentData(this.searchDepartTable, DEPARTMENTQUERY_URL);
    // 初始化查询问卷
    this._examQueryAjAX(this.datas, EXAMQUESTION_URL);
    // 初始化请求预览问卷
    this._previewExamAjax(this.datas, PREVIEW_URL);
  },
  computed: {
    getDepartmentList() {
      return this.$store.state.user.departmentList;
    }
  },
  watch: {
    datas: {
      handler(newValue, oldValue) {
        console.log(newValue);
        if (oldValue.departNum === 0 || oldValue.options === "") {
          this.isDisbledBorn = true;
          this.isDisbledBorn = true;
        } else {
          this.isDisbledBorn = false;
        }
      },
      deep: true
    }
  }
};
</script>
<style scoped>
.departments {
  margin: 10px 0;
}
.departments div button {
  margin-left: 10px;
}

.questionnaire .question-title {
  margin: 10px;
}

.questionnaire .question-title h3 {
  text-align: left;
  margin-left: 100px;
}
.questionnaire .radio-items {
  margin: 10px 50px;
  font-size: 17px;
}
.questionnaire-container {
  width: 1200px;
}
.redFont {
  color: #ed4014;
  font-size: 18px;
}
</style>
<style>
.test-table .ivu-table-row-highlight td {
  background: rgba(45, 183, 245, 0.5);
}
</style>
